import React, { useState, startTransition } from 'react'
import { withRouter } from 'react-router-dom'
import { Layout, Menu } from 'antd';
// import { menu } from '../../config/menu'
import { connect } from 'react-redux'
const { Sider } = Layout;

// const menu = [
//   { label: '首页', key: '/home', icon: <PieChartOutlined /> },
//   { label: '用户管理', key: '/user', icon: <DesktopOutlined /> },
//   { label: '文章管理', key: '/article', icon: <UserOutlined />, children: [
//     { label: '文章列表', key: '/article/list' },
//     { label: '审核文章', key: '/article/audit' },
//   ] },
//   { label: '每日一语', key: '/mood/list', icon: <FileOutlined /> },
//   { label: '分类管理', key: '/category/list', icon: <FileOutlined /> },
// ];

function SideBar(props) {
  console.log(props)
  const [collapsed, setCollapsed] = useState(false)
  const defaultOpenKeys = ['/' + props.location.pathname.split('/')[1]]
  const defaultSelectedKeys = [props.location.pathname]
  console.log(defaultOpenKeys, defaultSelectedKeys)

  const clickMenuItem = (data) => {
    console.log('clickMenuItem', data)
    const { key: path } = data
    startTransition(() => {
      props.history.push(path)
    })
    
  }

  return (
    <Sider collapsible collapsed={collapsed} onCollapse={() => setCollapsed(!collapsed)}>
        <div style={{
          background: '#1C8AE7',
          lineHeight: '72px',
          textAlign: 'center',
          color: '#fff',
          fontSize: '18px',
          fontWeight: 'bold'
        }}>博客管理后台</div>
        <Menu theme="dark" defaultSelectedKeys={['1']} mode="inline" items={props.routes} onClick={clickMenuItem} 
          defaultOpenKeys={defaultOpenKeys}
          selectedKeys={defaultSelectedKeys}
        />
      </Sider>
  )
}

export default connect((state) => {
  console.log(state)
  return {
    routes: state.RouterReducer
  }
})(withRouter(SideBar))
